<template>
  <div>
    <div class="top">
      <h2>校园超市</h2>
      <van-search v-model="value" placeholder="请输入搜索关键词" />
    </div>
    <div class="center">
      <div class="left">
        <ul>
          <li v-for="(item, index) in leftlist" :key="index">
            <p
              :class="ind == index ? 'action title' : 'title'"
              @click="getindex(index)"
            >
              {{ item.title }}
            </p>
          </li>
        </ul>
      </div>
      <div class="right">
        <p class="childrentitle" v-for="(item) in leftlist[ind].children" :key="item.id">
          {{ item.name }}
        </p>
        <Item :itemindex="itemindex" :rightlist="rightlist" />
      </div>
    </div>
  </div>
</template>

<script>
import Item from "./Item.vue";
import { menulist, homelist } from "../../.././api/api";
export default {
  components: {
    Item,
  },
  data() {
    return {
      value: "",
      leftlist: [],
      itemindex: 0,
      rightlist: [],
      ind: 0,
    };
  },
  created() {
    this.render();
    this.getindex(this.itemindex);
  },
  methods: {
    render() {
      menulist().then((res) => {
        this.leftlist = res.data.data;
      });
    },
    getindex(index) {
      this.ind = index;
      this.rightlist = [];
      this.itemindex = index;
      homelist().then((res) => {
        let newlist = res.data.data.data;
        for (var i = 0; i < newlist.length; i++) {
          if (newlist[i].type_id == this.leftlist[this.itemindex].id) {
            this.rightlist.push(newlist[i]);
          }
        }
      });
    },
  },
};
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}
h2 {
  margin-bottom: 0px;
  text-align: center;
}
.childrentitle{
  font-size: 16px;
  display: inline-block;
  margin-left: 15px;
  text-align: center;
  margin-top: 5px;
  /* justify-content: space-around; */
}
.left {
  float: left;
  width: 30%;
  /* border-right: 1px solid #ccc; */
  overflow: auto;
  height: calc(100vh - 140px);
  background-color: #f9f9f9;
}
.right {
  overflow: auto;
  float: right;
  width: 68%;
  height: calc(100vh - 140px);
  /* border: 1px solid #ccc; */
}
.title {
  font-size: 13px;
  color: #9f9f9f;
  text-align: center;
  line-height: 30px;
}
.action {
  color: red;
}
</style>